<template>
  <div>
    <div>
      <div class="titleBackgroundColor title-border" :style="{ height:suffererSize120,lineHeight:suffererSize120 }">
       <div class="n-title-text" :style="{fontSize:fontSize30}">患者</div>
     </div>
    <div class="allUser" :style="{ height: sufferSize90,lineHeight: sufferSize90,marginTop: sufferSize30 }" v-on:click="openSuffererList">
      <div style="float: left;" :style="{marginLeft: sufferSize30,marginTop: sufferSize11}"><img :src="userList" :style="{height:suffererSize50, width:suffererSize50}"></img></div> 
      <div style="font-weight: bold;float: left;" :style="{ marginLeft: sufferSize30,fontSize: sufferSize30 }">全部患者</div>
      <div class="sufferer-text-color" style="float: right;" :style="{ marginRight: sufferSize30 }">></div>
      <div class="sufferer-text-color" style="float: right;" :style="{ marginRight: sufferSize30 }">11人</div>
    </div>
    <div class="sufferer-text-color" style="font-weight: bold" :style="{ marginLeft: sufferSize30,fontSize: sufferSize20, marginTop:sufferSize20 }">最新患者</div>
    </div>
    <div class="allUser" :style="{height:sufferSize937, marginTop: sufferSize30}" style="text-align: center;">
      <div :style="{paddingTop: sufferSize208}">
        <div ><img :src="singo"></div>
        <div :style="{paddingTop: sufferSize41}">没有新患者?</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { fetchPatientListByDoctorId } from '@/api/course'
  export default {
    data () {
      return {
        singo: '../../../static/singo.png',
        userList: '../../../static/userList.png',
        patientList: [],
        dcotorId: this.$route.query
      }
    },
    mounted () {},
    computed: {
      initFontSize () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      initWidth () {
        return this.clientWidth + 'px'
      },
      initHeight () {
        return this.clientHeight + 'px'
      },
      suffererSize50 () {
        return this.clientWidth * 50 / 750 + 'px'
      },
      suffererSize120 () {
        return this.clientWidth * 120 / 750 + 'px'
      },
      sufferSize11 () {
        return this.clientWidth * 11 / 750 + 'px'
      },
      sufferSize41 () {
        return this.clientWidth * 41.7 / 750 + 'px'
      },
      sufferSize20 () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      sufferSize208 () {
        return this.clientWidth * 208.3 / 750 + 'px'
      },
      sufferSize30 () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      sufferSize50 () {
        return this.clientWidth * 50 / 750 + 'px'
      },
      sufferSize90 () {
        return this.clientWidth * 90 / 750 + 'px'
      },
      sufferSize937 () {
        return this.clientWidth * 937.5 / 750 + 'px'
      }
    },
    methods: {
      getPatients (doctorId) {
        console.log(doctorId)
        fetchPatientListByDoctorId(doctorId).then(response => {
          this.patientList = response.data
        })
      },
      openSuffererList () {
        var router = this.$router
        router.push({path: '/sufferList', query: { doctorId: 3 }})
      }
    }
  }
</script>
<style lang="less" scoped>
  
  .n-center {
    text-align: center;
  }
  .n-success {
    color: #00b685;
  }
  .n-fail {
    color: red;
  }
  .allUser {
    background-color: #ffffff;
  }
  .sufferer-text-color {
    color: #C0C0C0;
  }
</style>
